<template>
  <section class="section">
      <h2 @click='click()'>
          this is a footer
      </h2>
      <div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{{title}}</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
                </div>
            </div>
        </div>
      </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      title: '这是模态框的标题'
    }
  },
  created () {
    this.click()
  },
  methods: {
    click () {
      this.$('#myModal').modal()
    }
  }
}
</script>

